<template>
	<view class="p-r-30" style="padding-top: 30rpx;">
		
		<view class="list w-1 fr-b-s">
			<view class="list-item fl-s-s" v-for="(item,index) in list" :key="index" @click="toDetail(item.id,item.platform,item.c_father_goods_id)">
				<image :src="item.image" mode="aspectFill" class="item-img" v-if="item.platform == 1"></image>
				<image :src="baseUrl.cdnurl+item.image" mode="aspectFill" class="item-img" v-else></image>
				<view class="fr-s-c w-1 relative" style="height: 32rpx; padding-left: 20rpx; margin-top: -18rpx;">
					<view class="fr-c label" v-if="item.is_new==1">新品</view>
					<view class="fr-c label" v-if="item.is_tj==1">推荐</view>
				</view>
				<text class="m-t-10 w-1 text-line-2 c-00 fs-30 fm-ali" style="height: 83rpx;  padding: 0 20rpx;">{{item.title}}</text>
				<view class="fr-s-c fm-ali" style="padding-left: 20rpx; color: #FA360A; align-items: baseline;">
					<text class="fs-24">￥</text>
					<text class="fs-36">{{item.price | pointsPrice}}</text>
					<text class="fs-20">.{{item.price | pointsPrice(1)}}</text>
				</view>
				<view class="shangjia-bottom animated11 rubberBand11">
					此商品可原价回购
				</view>
			</view>
		</view>
		<view class="m-t-250" v-if="nodata">
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	import {pointsPrice} from '@/utils/util.js'
	import config from '@/utils/base.js';
	export default {
		data() {
			return {
				page:1,
				search_keys:'',
				list:[],
				nodata:false,
				count:0,
				baseUrl:config
			}
		},
		onReachBottom() {
			if(this.list.length<this.count){
				this.page++
				this.searInfo()
			}
		},
		onLoad() {
		this.page = 1
		this.list = []
		this.searInfo()	
		},
		filters:{
			pointsPrice
		},
		methods: {
			// 搜索商品
			searInfo(){
				this.$get({
					url:'/wanlshop/home/tjList',
					data:{
						page:this.page
					},
				}).then(res=>{
					this.list = this.page==1?res.data.data:[...this.list,...res.data.data]
					this.nodata = !this.list.length
					this.count = res.data.total
				}).catch(err=>{
					this.list = []
					this.nodata = !this.list.length
					this.count = 0
				})
			},
			// 搜索
			getSearch(){
				this.page = 1
				this.list = []
				this.searInfo()
			},
			// 商品详情
			toDetail(id,platform,c_father_goods_id){
				let c_father = c_father_goods_id || 0
				if(!uni.getStorageSync('user_id')){
					uni.navigateTo({
						url:"/pages/Login/Login"
					})
					return
				}
				uni.navigateTo({
					url:'/pages/Home/GoodsDetail/GoodsDetail?id='+id+'&platform='+platform+'&c_father_goods_id='+c_father
				})
			},
		}
	}
</script>

<style>
page{
	/* background: black; */
}
.s-outer{
	position: sticky;
	top: 0;
	left: 0;
	z-index: 9999;
	padding: 20rpx 0;
}
.shangjia-bottom{
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #E56D31;
		margin-top: 12rpx;
		padding: 0 10rpx;
	}
.search-box {
		width: 686rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 2rpx solid #FA360A;
		margin: auto;
	}
.search-btn {
		width: 142rpx;
		height: 60rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		font-size: 26rpx;
		font-family: Alibaba;
		color: #FFFFFF;
	}

	.s-input {
		font-size: 26rpx;
		font-family: Alibaba;
		color: #CCCCCC;
		margin-left: 6rpx;
	}
.list {
		padding-top: 20rpx;
		flex-wrap: wrap;
	}

	.list-item {
			width: 332rpx;
			height: 506rpx;
			background: #FDFBFB;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			border: 2rpx solid #F4F4F4;
		}
	.item-img{
		width: 332rpx; 
		height: 282rpx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.label {
		height: 32rpx;
		background: linear-gradient(270deg, #EBC66D 0%, #EFDDB2 100%);
		border-radius: 4rpx;
		font-size: 20rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		padding: 0 20rpx;
		margin-right: 8rpx;
	}
	
	
	@-webkit-keyframes rubberBand11 {
		from {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	
		30% {
			-webkit-transform: scale3d(1.25, 0.75, 1);
			transform: scale3d(1.25, 0.75, 1);
		}
	
		40% {
			-webkit-transform: scale3d(0.75, 1.25, 1);
			transform: scale3d(0.75, 1.25, 1);
		}
	
		50% {
			-webkit-transform: scale3d(1.15, 0.85, 1);
			transform: scale3d(1.15, 0.85, 1);
		}
	
		65% {
			-webkit-transform: scale3d(0.95, 1.05, 1);
			transform: scale3d(0.95, 1.05, 1);
		}
	
		75% {
			-webkit-transform: scale3d(1.05, 0.95, 1);
			transform: scale3d(1.05, 0.95, 1);
		}
	
		to {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}
	
	
	
	.rubberBand11 {
		-webkit-animation-name: rubberBand11;
		animation-name: rubberBand11;
	}
	
	.animated11 {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
	}
</style>
